{% include 'JDXJ/JDXJ_index.html' %}

<div class="am-cf admin-main">
  {% include 'sidebar.html' %}
  <!-- content start -->
  <div class="admin-content">
    <div class="admin-content-body">
      <div class="am-cf am-padding">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">故障统计</strong></div>
      </div>
      <div class="am-g" style="position: absolute;height: 100%;right: 0px;left: 260px;width: auto;">

        {% include 'JDXJ/GZTJ/JDXJ_GZTJ_SIDEBAR.html' %}

        <div class="am-u-sm-10" style="position: absolute;width:auto;right:0;left: 200px;height: auto;overflow-y: scroll;bottom: 100px;top: 0px;">
          <div class="am-form-group" >
            <div class="am-alert am-alert-danger" id="my-alert" style="display: none">
              <p>开始日期应小于结束日期！</p>
            </div>
            <div class="am-g" style="margin:0 15px;">
              <div class="am-u-sm-6">
                <button type="button" class="am-btn am-btn-default am-margin-right" id="start_time">开始日期</button><span id="my-startDate">2017-09-13</span>
              </div>
              <div class="am-u-sm-6">
                <button type="button" class="am-btn am-btn-default am-margin-right" id="end_time">结束日期</button><span id="my-endDate"></span>
              </div>
            </div>

          </div>

          <div class="am-form-group" >
            <div class="am-g am-margin-top am-form-group">
              <div class="am-u-sm-5 am-u-md-1 am-text-right">检查类型：</div>
              <div class="am-u-sm-7 am-u-md-5 am-u-end" >
                <label class="am-radio-inline">
                  <input type="radio" name="radio10" value="1" data-am-ucheck> 日常检查
                </label>
                <label class="am-radio-inline">
                  <input type="radio" name="radio10" value="2" data-am-ucheck> 经常检查
                </label>
                <label class="am-radio-inline">
                  <input type="radio" name="radio10" value="3" data-am-ucheck> 定期检查
                </label>
                <label class="am-radio-inline">
                  <input type="radio" name="radio10" value="4" data-am-ucheck> 检查汇总
                </label>

              </div>
              <div class="am-u-sm-5 am-u-md-5">
                <button  type="button" class="am-btn am-btn-primary btn-loading-example" onclick="see()">搜索</button>
              </div>
                      
            </div>

          </div>

          <div class="am-u-sm-12 am-u-md-12 " id="see" style="display: none;">
            <div class="am-tabs am-margin" data-am-tabs>
              <ul class="am-tabs-nav am-nav am-nav-tabs">
                <li class="am-active">
                  <a href="#tab1">统计表格</a>
                </li>
                <li>
                  <a href="#tab2">图形展示区</a>
                </li>
              </ul>

              <div class="am-tabs-bd">
                <div class="am-tab-panel am-fade am-in am-active" id="tab1">
                  <table id="grid" class="am-table am-table-striped am-table-hover table-main am-table-compact am-text-nowrap">
                    <thead>
                      <tr>
                        <th class="table-title">序号</th>
                        <th class="table-title">设备名称</th>
                        <th class="table-title">故障次数</th>
                      </tr>
                    </thead>
                    <tbody>
                    </tbody>
                  </table>
                </div>

                <div class="am-tab-panel am-fade" id="tab2">
                  <div id="chart"></div>
                </div>

              </div>
            </div>

          </div>

         

        </div>
      </div>
    </div>
  </div>
</div>
{% include 'footer.html' %}

<script src="/static/assets/js/jquery.min.js"></script>

<script src="/static/assets/js/amazeui.min.js"></script>
<script src="/static/assets/js/amazeui.tree.js"></script>
<script type="text/javascript" src="/static/assets/js//layer.js"></script>
<script src="/static/assets/datatables/amazeui.datatables.min.js"></script>
<script src="/static/assets/dialog/amazeui.dialog.min.js"></script>
<script src="/static/assets/highcharts/highcharts.src.js"></script>
<!-- <script src="/static/assets/highcharts/highstock.src.js"></script> -->
<!-- <script src="/static/assets/highcharts/lichart.js"></script> -->
<link rel="stylesheet" type="text/css" href="/static/assets/css/amazeui.tree.css" />
 <link rel="stylesheet" type="text/css" href="/static/assets/css/amazeui.datatables.css"/>
<script src="/static/assets/js/app.js"></script>
<style type="text/css">
  .li_a {
    color: #5c5c5c;
  }
  .tr_select{
    background-color: #dbdcf4!important; 
  }
  .tr_tr{

  }
</style>
<script type="text/javascript">
  $.ajaxSetup({
  data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
  });
  $("#collapse-nav8").addClass("am-in");
  $("#jdxjgztj").css("color", "#3399CC");
  $("#jdxj").css("color", "#3399CC");
  $("#gztjdgtj").removeClass("li_a");

$(document).ready(function(){
  var date = new Date();
    var seperator1 = "-";
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
   
  $("#end_time").attr('value',currentdate);
  $("#my-endDate").html(currentdate);  
})

  function see() {
    var start_time = $("#my-startDate").html();
    var end_time = $("#my-endDate").html();
    var mold = $("input:radio[name='radio10']:checked").val();
    if(mold != undefined){
      select(start_time,end_time,mold);
      $("#see").css("display","block");
    }else{
      AlertMSG("请选择检查类型！")
    }

  }
  

  function select(start_time,end_time,mold){
    $.ajax({
          "url": "/JDXJ_GZTJ_ONE_DATA/",
          "datatype": "json",
          "data":{"start_time":start_time,"end_time":end_time,"mold":mold},
          "type": "post",
          "async": "false"
        }).success(function(data) {
          console.log(data)
          if(data.status == 1){
            table(data.data);
            chart(data.data);

          }else{
            AlertMSG(data.message);
          }
          
          
        }).error(function(data) {
          AlertMSG("读信息失败！");
          return []
        });
  }

  function table(data){
    if ($('#grid').hasClass('dataTable')) {
      dttable = $('#grid').dataTable();
      dttable.fnClearTable(); //清空一下table
      dttable.fnDestroy(); //还原初始化了的datatable
    }





      var t = $('#grid').DataTable({

      bInfo: true, 
      responsive: true,
      searching: true,
      lengthChange: false,
      paging: true,
      bStateSave: true, //保存页面状态
      aLengthMenu: [
        [10],
        [10]
      ],
      // ajax: {

      //   url: "/JDXJ_JCSJ_JCNR_DATA/?tp="+tp
      // },
      data:data,

      columns: [
        {
          data: null,
          bSortable: false,
          targets: 0,
          //width : "30px",  
          render: function(data, type, row, meta) {
            // 显示行号  
            var startIndex = meta.settings._iDisplayStart;
            return startIndex + meta.row + 1;
          }
        },
        {
          "data": "name"
        },
        {
          "data": "count"
        }
      ],
      "columnDefs": [
        {
          type: 'chinese-string',
          targets: '_all'
        }
        // ,
        // {
        //   "render": function(data, type, row, meta) {
        //     return '<div class="am-btn-toolbar"><div class="am-btn-group am-btn-group-xs"><button class="am-btn am-btn-default am-btn-xs am-text-secondary" onclick="disease_modify(' + row.id + ')"><span class="am-icon-pencil-square-o"></span> 修改</button><button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only" onclick="disease_delect(' + row.id + ',\'' + row.equipment_name + '\')"><span class="am-icon-trash-o"></span> 删除</button></div></div>'
        //   },
        //   "targets": 5
        // }
      ],
    });
  }






  function chart(data){
    var x_data = [];
    var y_data = [];
    for(var i=0; i < data.length;i++){
      x_data.push(data[i].name);
      y_data.push(data[i].count);
    }


    $('#chart').highcharts({
            chart: {
               type: 'column'
            },
            title: {
                text: '故障统计图'
            },
            subtitle: {
                text: ''
              },
            xAxis: {
                categories: x_data,
                 crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                      text: '次数（次）'
              }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                  '<td style="padding:0"><b>{point.y:.1f} kW h</b></td></tr>',
                footerFormat: '</table>',
              shared: true,
              useHTML: true
          },
            plotOptions: {
              column: {
                    pointPadding: 0.4,
                  borderWidth: 1,
                }
            },
            series: [{
                name:"故障次数",
          data:y_data
            }
          //   , {
          //       name:"设计能耗",
          // data:YCar0
          // }
          ]
      });
  }

 $(function() {
    var startDate = parserDate($("#my-startDate").html());
    var endDate = parserDate($("#my-endDate").html());
    var $alert = $('#my-alert');
    $('#start_time').datepicker().
      on('changeDate.datepicker.amui', function(event) {

        if (event.date.valueOf() > endDate.valueOf()) {
          $alert.find('p').text('开始日期应小于结束日期！').end().show();
        } else {
          $alert.hide();
          startDate = new Date(event.date);
          $('#my-startDate').text($('#start_time').data('date'));
        }
        $(this).datepicker('close');
      });

    $('#end_time').datepicker().
      on('changeDate.datepicker.amui', function(event) {
        if (event.date.valueOf() < startDate.valueOf()) {
          $alert.find('p').text('结束日期应大于开始日期！').end().show();
        } else {
          $alert.hide();
          endDate = new Date(event.date);
          $('#my-endDate').text($('#end_time').data('date'));
        }
        $(this).datepicker('close');
      });
  });


 var parserDate = function (date) {  
    var t = Date.parse(date);  
    if (!isNaN(t)) {  
        return new Date(Date.parse(date.replace(/-/g, "/")));  
    } else {  
        return new Date();  
    }  
};  

      var AlertMSG = function(msg) {
        AMUI.dialog.alert({
          title: '错误提示',
          content: msg,
          onConfirm: function() {
            console.log('close');
          }
        });
      }
</script>

</body>

</html>